import 'package:flutter/material.dart';
import 'package:xlsk/utils/dimension.dart';

class Search extends StatefulWidget {
  num width;
  num height;
  String placeholder;
  String value = '';
  bool _showClose = false;
  var callback;

  Search(this.width,this.height,this.placeholder,this.callback);

  @override
  State<StatefulWidget> createState() {
    return _searchState();
  }
}

class _searchState extends State<Search> {
  TextEditingController _searchController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment(-1,0),
      child: Container(
        child: Row(
          children: [
            Icon(Icons.search,size: 20,color: Color(0xFFC0C4CC)),
            Expanded(
              flex: 1,
              child: Container(
                child: TextField(
                  controller: _searchController,
                  cursorColor: Color(0xFF1F2329),
                  style: TextStyle(color: Color(0xFF646A73),fontSize: Dimension(context).toPx(14),height: 1.1),
                  decoration: InputDecoration.collapsed(
                    hintText: '${widget.placeholder}',
                    hintStyle: TextStyle(color: Color(0xFFC0C4CC),fontSize: Dimension(context).toPx(14)),
                  ),
                  onChanged: (e){
                    setState(() {
                      widget.value = e;
                    });
                  },
                  onSubmitted: (e){
                    submit();
                  },
                ),
                margin: EdgeInsets.only(left: Dimension(context).toPx(8)),
              ),
            ),
            GestureDetector(
              child: Container(
                child: Center(
                  child: Icon(Icons.close,size: _searchController.text!=''?18:0,color: Color(0xFFC0C4CC)),
                ),
                width: Dimension(context).toPx(20),
                height: Dimension(context).toPx(32),
              ),
              onTap: (){
                if(_searchController.text!=''){
                  _searchController.clear();
                  setState(() {
                    widget.value = '';
                    submit();
                  });
                }
              },
            )
          ],
        ),
        width: Dimension(context).toPx(widget.width),
        height: Dimension(context).toPx(widget.height),
        padding: EdgeInsets.symmetric(horizontal: Dimension(context).toPx(9)),
        decoration: BoxDecoration(
            color: Color(0xfff2f2f2),
            borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(32)))
        ),
      ),
    );
  }

  void submit(){
    widget.callback(widget.value);
  }
}
